<template>
	<div class="zy-content">
		<div class="tenace_box">
			<div class="box_content">
				<div class="serachBox" style="border-radius: 5px">
					<!-- v-show="listArr && listArr.length" -->
					<search :columns="searchData" style="width: 100%" :otherSpan="12" :span="6" @getSearch="getSearch(arguments)">
						<template slot="others" v-if="idsList && idsList.length">
							<Button v-if="activeTab === '待保养'" @click="handleBatchTransfer" class="search-btn">
								{{ $t('fault.TransferOrderMach') }}
							</Button>
							<Button style="margin-left: 15px" class="search-btn" @click="handleBatchDelete">
								{{ $t('common.batchDelete') }}
							</Button>
						</template>
					</search>
				</div>
				<Tabs :value="activeTab" @on-click="tabChange" class="content_tab tabs-layout" animated>
					<TabPane v-for="(item, index) in tabList" style="margin-top: 5px" :name="item.title" :key="index" :label="(h) => labelRender(h, item)">
						<div class="serachBoxMain orderList" v-if="showInfo">
							<div class="wrap" v-if="listArr && listArr.length">
								<div class="item" v-for="(list, index) in listArr" :key="index">
									<div class="itemBoximg">
										<orderStatusIcon :status="activeTab"></orderStatusIcon>
									</div>
									<div class="name">
										<span>{{ list.deviceNo }}</span>
									</div>
									<div style="display: flex; justify-content: flex-start; align-items: center; height: 26px">
										<span class="tag_item text">{{ list.deviceName }}</span>
									</div>
									<div style="display: flex; align-items: center; max-height: 49px; flex-wrap: wrap">
										<span class="tag_item">
											<Tag color="yellow" class="tag_item">
												{{ list.taskLevel ? `${['一', '二', '三'][list.taskLevel - 1]}级保养` : '--' }}
											</Tag>
										</span>
										<span class="tag_item">
											<Tag color="blue" class="tag_item"> {{ list.isConfirm }}</Tag>
										</span>
										<span class="tag_item">
											<Tag color="blue" class="tag_item">
												{{ list.triggerCycle ? ['日', '周', '月', '季', '半年', '年', '班次', '计时'][list.triggerCycle - 1] : '' }}</Tag
											>
										</span>
									</div>
									<div class="details">
										<div class="formItem" v-if="list.realname">
											<div class="label">{{ $t('保养人') }}：</div>
											<div class="value">{{ list.realname }}- {{ list.operateEmpno }}</div>
										</div>
										<div class="formItem">
											<div class="label">{{ $t('计划名称') }}：</div>
											<div class="value">{{ list.planName }}</div>
										</div>
										<div class="formItem">
											<div class="label">{{ $t('保养单号') }}：</div>
											<div class="value num" @click="startBao(list)">
												{{ list.maintenanceNumber }}
											</div>
										</div>
										<div class="formItem">
											<div class="label">{{ $t('安装位置') }}：</div>
											<div class="value">{{ list.functionalLocationName }}</div>
										</div>
										<div class="formItem">
											<div class="label">{{ $t('标准工时') }}：</div>
											<div class="value">{{ list.itemHours }}</div>
										</div>
										<div class="formItem">
											<div class="label">{{ $t('创建时间') }}：</div>
											<div class="value">{{ list.createTime }}</div>
										</div>
										<div class="formItem">
											<div class="label">{{ $t('截至时间') }}：</div>
											<div class="value">{{ list.taskEndTime }}</div>
										</div>
										<div class="btnF">
											<Checkbox v-model="list.checked" @on-change="checkBoxchange(list)" />
											<div class="btnF_box">
												<template v-if="list.taskStatus === 0 || list.taskStatus === 5">
													<span class="btn" @click="getOrder(list)" v-has="'deviceMaintainService'">接单</span>
												</template>
												<span class="btn delbtn" @click="delItem(list)" v-has="'deviceMaintainDel'">删除</span>
												<template v-if="list.taskStatus === 1 || (list.taskStatus === 5 && list.realname)">
													<span class="btn" @click="batchTransfer(list)" v-has="'deviceMaintainDispath'">分配</span>
												</template>
												<template v-if="list.taskStatus === 0 || (list.taskStatus === 5 && !list.realname)">
													<span class="btn" @click="distribution(list)" v-has="'deviceMaintainDispath'">{{ $t('common.Distribution') }}</span>
												</template>
												<template v-if="list.taskStatus === 1 || list.taskStatus === 2 || (list.taskStatus === 5 && list.realname)">
													<span class="btn" @click="startBao(list)" v-has="'deviceMaintainComplete'">开始保养</span>
												</template>
												<template v-if="list.taskStatus === 3">
													<span class="btn" @click="startBao(list)" v-has="'deviceMaintainConfirm'">确认保养</span>
												</template>
												<template v-if="Number(list.taskStatus) > 3 && list.taskStatus !== 2 && list.taskStatus !== 5">
													<span class="btn checkbtn" @click="startBao(list)">{{ $t('maintenance.maintenanceCheck') }}</span>
												</template>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="noneList" v-else>
								<span class="img_box">
									<img src="@/assets/imgs/maintenance/nonelist.png" />
								</span>
								<span class="noneListText">{{ $t('maintenance.noData') }}</span>
							</div>
						</div>
					</TabPane>
				</Tabs>
				<div class="pageWrap" v-if="listArr && listArr.length">
					<span class="checkAll"
						>{{ $t('common.All') }}
						<Checkbox v-model="allChecked" @on-change="checAll" />
					</span>
					<Page
						:total="totalNum"
						:page-size="pageSize"
						:page-size-opts="$variable.pageSizes"
						:current="pageNum"
						@on-change="changePageNum"
						@on-page-size-change="changePageSize"
						show-sizer
						show-total
					/>
				</div>
			</div>
		</div>
		<Modal :mask-closable="false" v-model="delFaultCodeShowF" title="">
			<Row class="enableContent">
				<Col span="24" class="enableContentInner">
					<img width="95px" src="~images/event/del.png" alt="" />
				</Col>
				<Col span="24" class="enableTips">
					<span>请确认是否删除？</span>
				</Col>
			</Row>
			<div slot="footer">
				<Button type="default" @click="delFaultCodeShowF = false">{{ $t('common.Cancle') }}</Button>
				<Button type="primary" @click="removeNode">{{ $t('maintenance.Confirmed') }}</Button>
			</div>
		</Modal>

		<Modal :mask-closable="false" v-model="caseStatus" :title="`${$t('maintenance.Close')}`">
			<div class="contentBox">
				<span class="title">{{ $t('maintenance.casereson') }}</span>
				<Input v-model="caseEndReason" type="textarea" :rows="4" placeholder="请填写结案原因..." />
			</div>
			<div slot="footer">
				<Button type="default" @click="caseStatus = false">{{ $t('common.Cancle') }}</Button>
				<Button type="primary" @click="caseOk">{{ $t('maintenance.Confirmed') }}</Button>
			</div>
		</Modal>

		<Modal :mask-closable="false" class="modal-title-layout" v-model="closeOrder" :title="`${$t('fault.Receiving')}`">
			<div class="icon blue">
				<i class="iconfont zy-common-chenggong1"></i>
			</div>
			<p class="title">
				<span>{{ $t('是否接单') }}</span>
			</p>
			<div slot="footer">
				<Button type="default" @click="closeOrder = false">{{ $t('common.Cancle') }}</Button>
				<Button type="primary" @click="orderEnter">{{ $t('maintenance.Confirmed') }}</Button>
			</div>
		</Modal>

		<signle-common-modal ref="signleCommonModal" @handleRefresh="handleRefresh" />
	</div>
</template>

<script>
import signleCommonModal from '@/views/devScene/repair/modules/signleCommonModal';
import orderStatusIcon from './modules/orderStatusIcon';
import { getlistNum, getDeviceList, finishCase } from '@/api/maintenance';
import { mapGetters } from 'vuex';
import search from '@/components/curd/searchList.vue';

export default {
	name: 'maintenanceListPage',
	components: {
		signleCommonModal,
		orderStatusIcon,
		search,
	},
	computed: {
		...mapGetters(['activeTabInfo']),
		activeIndex: function () {
			const index = this.tabList.find((val) => val.title === this.activeTab).taskStatus;
			return index;
		},
	},
	data() {
		return {
			searchData: [
				{
					title: '安装位置',
					key: 'functionalLocation',
					type: 'cascader',
					dicUrl: '/basic/organization/findListByToken?level=2',
					params: {
						label: 'name',
						value: 'code',
						children: 'children',
					},
				},
				{
					title: '设备名称',
					key: 'deviceName',
				},
				{
					title: '设备编号',
					key: 'deviceNo',
				},
				{
					title: '设备等级',
					key: 'deviceGrade',
					type: 'select',
					dicData: [
						{ label: 'A', value: 'A' },
						{ label: 'B', value: 'B' },
						{ label: 'C', value: 'C' },
					],
				},
				{
					title: '设备类别',
					key: 'deviceCategory',
					dicUrl: '/dms/faultCategory/dictList?name=设备类别',
					type: 'select',
					params: {
						label: 'value',
						value: 'value',
					},
				},
				{
					title: '保养计划',
					key: 'planName',
					type: 'search',
					dicUrl: 'dms/dcmMaintainPlan/list',
					queryMethod: 'post',
					queryParams: {
						pageNo: 1,
						pageSize: 999,
						status: 0,
					},
					resultParams: 'res.data.list',
					params: {
						label: 'planName',
						value: 'planName',
					},
					queryName: 'planName',
				},
				{
					title: '保养级别',
					key: 'taskLevel',
					type: 'select',
					dicData: [
						{ label: '一级保养', value: 1 },
						{ label: '二级保养', value: 2 },
						{ label: '三级保养', value: 3 },
					],
				},
				{
					title: '保养日期',
					key: 'time1',
					type: 'daterange',
				},
				{
					title: '保养人',
					key: 'assistMaintainBy',
					type: 'select',
					dicUrl: '/basic/user/searchUser',
					queryName: 'key',
					queryParams: {
						pageSize: 99,
						pageNum: 1,
					},
					resultParams: 'res.data',
					params: {
						label: 'realname',
						value: 'realname',
					},
				},
				{
					title: '保养类型',
					key: 'baoyangleix',
					type: 'select',
				},
				{
					title: '设备流水号',
					key: 'deviceMId',
					type: 'search',
					dicUrl: '/dms/device/page',
					queryMethod: 'post',
					queryParams: {
						pageSize: 99,
						pageNum: 1,
					},
					resultParams: 'res.data.records',
					queryName: 'deviceMId',
					params: {
						label: 'deviceMId',
						value: 'deviceMId',
					},
				},
				{
					title: '保养单号',
					key: 'maintenanceNumber',
				},
			],
			orgIdList: '',
			closeOrder: false,
			allChecked: false,
			caseStatus: false,
			caseEndReason: '',
			delFaultCodeShowF: false,
			idsList: [],
			deviceNameList: [],
			centerList: [
				{ label: 'A', value: 'A' },
				{ label: 'B', value: 'B' },
				{ label: 'C', value: 'C' },
			],
			dateTimeRange: [],
			searchParams: {},
			typeInfo: '',
			levelList: [
				{ name: `${this.$t('一级保养')}`, key: 1 },
				{ name: `${this.$t('二级保养')}`, key: 2 },
				{ name: `${this.$t('三级保养')}`, key: 3 },
			],
			pageSizeOption: [10, 20, 30],
			deviceMId: '',
			loadEnd: false,
			pageNum: 1,
			pageSize: 10,
			showInfo: true,
			inputValue: '',
			listArr: [],
			targetCirlelist: [],
			circleList: [],
			tabList: [
				{
					title: `${this.$t('maintenance.Tobeallocated')}`,
					taskStatus: 0,
					num: 0,
				},
				// {
				//   title: `${this.$t("maintenance.Tobemaintained")}`,
				//   taskStatus: 1,
				//   num: 0,
				// },
				{
					title: `${this.$t('maintenance.Undermaintenance')}`,
					taskStatus: 2,
					num: 0,
				},
				{
					title: `${this.$t('maintenance.Tobeconfirmed')}`,
					taskStatus: 3,
					num: 0,
				},
				{ title: `${this.$t('maintenance.Statement')}`, taskStatus: 4, num: 0 },
				{ title: `${this.$t('maintenance.Expired')}`, taskStatus: 5, num: 0 },
				// {title:`${this.$t('maintenance.Closed')}`,taskStatus:6,num:0},
			],
			totalNum: 0,
			delObjInfo: {},
			caseRow: {},
			targetRow: {},
			activeTab: '',
			transferId: '',
			dispatchId: '',
			tarGetorder: '',
			timerId: '',
			englishStatus: false,
			userNoArr: [],
			deviceTypeList: [],
		};
	},
	activated() {
		this.getlistNum();
		// this.getOrgList();
		this.getFaultCategory('设备类型');
	},
	created() {
		if (!this.activeTabInfo) {
			``;
			this.$store.commit('detail/SET_ACTIVETAB', `${this.$t('maintenance.Tobeallocated')}`);
		}
	},
	mounted() {
		if (this.activeTabInfo) {
			this.activeTab = this.activeTabInfo;
		}
		// const index = this.tabList.findIndex(val => val.title === this.activeTab)
		// this.getlistNum(index)
		// this.getOrgList()
	},
	methods: {
		getSearch(arg) {
			this.searchParams = JSON.parse(JSON.stringify(arg[0]));
			const { functionalLocation } = this.searchParams;
			if (functionalLocation && functionalLocation.length > 0) {
				// this.searchParams.functionalLocation=functionalLocation.at(-1)
			} else delete this.searchParams.functionalLocation;
			this.assetsChange();
		},
		// 查询每个状态的数量
		async getlistNum() {
			let params = {
				opt: '',
				...this.searchParams,
			};
			const res = await getlistNum(params);
			const data = res.data || {};
			this.tabList.forEach((item, index) => {
				item.num = 0;
				if (data) {
					for (let val in data) {
						if (val == item.taskStatus) {
							item.num = data[val];
						}
					}
				}
			});
			this.getDataList();
		},
		getDataList() {
			this.listArr = [];
			const obj = {
				// code: this.targetRow.code,
				taskStatus: this.activeIndex,
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				...this.searchParams,
			};
			getDeviceList(obj).then((res) => {
				const data = res.data;
				this.listArr = data.records;
				this.listArr.forEach((val) => {
					val.checked = false;
					switch (val.isConfirm) {
						case 0:
							val.isConfirm = `${this.$t('不需要确认')}`;
							break;
						case 1:
							val.isConfirm = `${this.$t('需要确认')}`;
							break;
					}
					if (val.itemLevel) {
						for (let level of this.levelList) {
							if (val.itemLevel === level.key) {
								val.itemLevel = level.name;
							}
						}
					}
				});
				this.totalNum = data.total;
			});

			// if (data.records && data.records.length) {
			//     data.records.forEach(val => {
			//         val.code = item.code
			//         val.taskStatus = item.taskStatus
			//     })
			// }
			// if (this.pageNum === 1) {
			//     this.listArr = data.records
			// } else {
			//     this.listArr = this.listArr.concat(data.records)
			// }
		},
		labelRender(h, item) {
			return h('div', [
				h('span', item.title),
				h('Badge', {
					props: {
						count: item.num,
					},
				}),
			]);
		},
		orderEnter() {
			this.axios({
				method: 'post',
				url: '/dms/dcmMaintainTask/distribute',
				data: {
					id: this.tarGetorder.id,
				},
			}).then((res) => {
				if (res.code === 200) {
					this.$Message.success({
						content: `${this.$t('common.OrderSuce')}`,
						duration: 6,
						closable: true,
					});
				}
				this.getlistNum();
				this.closeOrder = false;
			});
		},
		getOrder(row) {
			this.tarGetorder = row;
			this.closeOrder = true;
		},
		debounceSerach(fn, delay) {
			let _this = this;
			return function f(...args) {
				if (_this.timeID) {
					clearTimeout(_this.timeID);
				}
				_this.timeID = setTimeout(() => {
					fn(args);
				}, delay);
			};
		},
		//获取故障数据
		getFaultCategory(name) {
			this.axios({
				method: 'get',
				url: '/dms/faultCategory/basicDict',
				params: { name },
			}).then((res) => {
				if (name === '设备类型') {
					this.deviceTypeList = res.data.map((item) => {
						if (item.value) return item;
					});
				}
			});
		},
		closeMance(row) {
			this.caseEndReason = '';
			this.caseRow = row;
			this.caseStatus = true;
		},
		formstaCasChange(value, selectValue) {
			if (selectValue.length > 0) {
				this.searchParams.orgCode = selectValue[selectValue.length - 1].value;
			} else {
				this.searchParams.orgCode = '';
			}
		},
		caseOk() {
			if (!this.caseEndReason) {
				this.$Message.warning('请填写结案原因!');
				return;
			}
			const data = {
				caseEndReason: this.caseEndReason,
				taskIdList: this.idsList && this.idsList.length ? this.idsList : [this.caseRow.taskId],
			};
			finishCase(data).then((res) => {
				if (res.code == 200) {
					this.getlistNum();
					this.caseStatus = false;
					this.$Message.success({
						content: '结案成功',
						duration: 4,
						closable: true,
					});
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 4,
						closable: true,
					});
				}
			});
		},
		getDeviceList() {
			this.axios({
				method: 'get',
				url: '/dms/dmsCategory/getSelectList',
				params: {},
			}).then((res) => {
				if (res.code === 200) {
					this.centerList = res.data;
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		removeNode() {
			this.axios({
				method: 'delete',
				url: '/dms/dcmMaintainTask/deleteBatch',
				params: {
					ids: this.idsList && this.idsList.length ? this.idsList.join(',') : this.delObjInfo.id,
				},
			}).then((res) => {
				if (res.code == 200) {
					this.getlistNum();
					this.idsList = [];
					this.delFaultCodeShowF = false;
					this.$Message.success('删除成功!');
				}
			});
		},
		checAll() {
			if (this.allChecked) {
				this.listArr.forEach((val) => (val.checked = true));
				this.idsList = this.listArr.map((val) => val.id);
			} else {
				this.listArr.forEach((val) => (val.checked = false));
				this.idsList = [];
			}
		},
		checkBoxchange(row) {
			const arr = this.listArr.filter((val) => val.checked);
			if (arr && arr.length) {
				this.idsList = arr.map((val) => val.id);
			} else {
				this.idsList = [];
			}
		},
		//批量删除
		handleBatchDelete() {
			this.delFaultCodeShowF = true;
		},
		delItem(row) {
			this.delObjInfo = row;
			this.delFaultCodeShowF = true;
		},
		//批量分配
		handleBatchDispatch() {
			this.dispatchStatus = 1;
			this.$refs.signleCommonModal.show({}, 2);
		},
		//批量转单
		handleBatchTransfer() {
			this.dispatchStatus = 2;
			this.$refs.signleCommonModal.show({}, 2);
		},
		batchTransfer(row) {
			this.transferId = row.taskId;
			this.dispatchStatus = 3;
			this.$refs.signleCommonModal.show({}, 2);
		},
		//分配
		distribution(row) {
			this.dispatchId = row.id;
			this.dispatchStatus = 0;
			this.$refs.signleCommonModal.show({}, 2);
		},
		handleRefresh(userIds) {
			console.log(111);
			if (this.dispatchStatus === 0) {
				this.axios({
					method: 'post',
					url: '/dms/dcmMaintainTask/distribute',
					data: {
						id: this.dispatchId,
						operateEmpno: userIds.toString(),
					},
				}).then((res) => {
					if (res.code == 200) {
						this.pageNum = 1;
						this.tactiveTab = `${this.$t('maintenance.Tobeallocated')}`;
						this.getlistNum();
						this.$Message.success({
							content: '分配成功！',
							duration: 2,
							closable: true,
						});
					} else {
						this.$Message.warning({
							content: res.msg,
							duration: 6,
							closable: true,
						});
					}
				});
			} else if (this.dispatchStatus === 1) {
				this.axios({
					method: 'post',
					url: '/dms/dcmMaintainTask/batchDistribute',
					data: {
						ids: this.idsList.join(','),
						operateEmpno: userIds.toString(),
					},
				}).then((res) => {
					if (res.code == 200) {
						this.pageNum = 1;
						this.tactiveTab = `${this.$t('maintenance.Tobeallocated')}`;
						this.getlistNum();
						this.$Message.success({
							content: '批量分配成功！',
							duration: 2,
							closable: true,
						});
					} else {
						this.$Message.warning({
							content: res.msg,
							duration: 6,
							closable: true,
						});
					}
				});
			} else if (this.dispatchStatus === 2) {
				//批量转单
				this.axios({
					method: 'post',
					url: '/dms/mobile/maintainTask/transfer',
					data: {
						taskIdList: this.idsList,
						operateEmpno: userIds.toString(),
					},
				}).then((res) => {
					if (res.code == 200) {
						this.pageNum = 1;
						this.tactiveTab = `${this.$t('maintenance.Tobeallocated')}`;
						this.getlistNum();
						this.$Message.success({
							content: '转单成功！',
							duration: 2,
							closable: true,
						});
					} else {
						this.$Message.warning({
							content: res.msg,
							duration: 6,
							closable: true,
						});
					}
				});
			} else {
				this.axios({
					method: 'post',
					url: '/dms/mobile/maintainTask/transfer',
					data: {
						taskIdList: [this.transferId],
						operateEmpno: userIds.toString(),
					},
				}).then((res) => {
					if (res.code == 200) {
						this.pageNum = 1;
						this.tactiveTab = `${this.$t('maintenance.Tobeallocated')}`;
						this.getlistNum();
						this.$Message.success({
							content: '转单成功！',
							duration: 2,
							closable: true,
						});
					} else {
						this.$Message.warning({
							content: res.msg,
							duration: 6,
							closable: true,
						});
					}
				});
			}
		},
		startBao(data) {
			this.$store.commit('detail/SET_DATING', data);
			this.$router.push({
				path: '/maintenanceDetail',
			});
		},
		reset() {
			this.orgIdList = '';
			this.dateTimeRange = [];
			this.typeInfo = '';
			this.searchParams = {};
			this.assetsChange();
		},
		assetsChange() {
			if (this.pageNum === 2) {
				this.pageNum = 1;
			}
			this.getlistNum();
		},
		changePageSize(pageSize) {
			this.allChecked = false;
			this.idsList = [];
			this.pageSize = pageSize;
			this.getDataList();
		},
		changePageNum(val) {
			this.allChecked = false;
			this.idsList = [];
			this.pageNum = val;
			this.getDataList();
		},

		tabChange(val) {
			this.allChecked = false;
			// this.searchParams = {}
			this.idsList = [];
			this.activeTab = val;
			this.$store.commit('detail/SET_ACTIVETAB', val);
			this.pageNum = 1;
			this.listArr = [];
			this.showInfo = false;
			this.inputValue = '';
			this.tabList.forEach((item) => {
				if (item.title === this.activeTab) {
					if (item.circleList && item.circleList.length) {
						item.circleList.forEach((val) => (val.active = false));
					}
				}
			});

			this.assetsChange();
			// this.findTargetarr();
			this.getDataList();
			this.$nextTick(() => {
				this.showInfo = true;
			});
		},
		swipeClick(text) {
			this.targetRow = {};
			if (text) {
				this.pageNum = 1;
				const row = this.targetCirlelist.find((val) => val.text === text);
				this.targetRow = row;
				this.tabList.forEach((item) => {
					if (item.title === this.activeTab) {
						if (item.circleList && item.circleList.length) {
							item.circleList.forEach((val) => (val.active = false));
						}
					}
				});
				this.$set(row, 'active', true);
				this.getDataList(row);
			}
		},
	},
};
</script>

<style scoped lang="scss">
@import 'index.scss';

/deep/ .ivu-form-item-label {
	margin-bottom: 0;
}

.pageWrap {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 10px 0;
	margin-right: 10px;

	.checkAll {
		display: inline-block;
		vertical-align: middle;
		min-width: 100px;
		height: 32px;
		line-height: 30px;
		margin-right: 10px;
		text-align: center;
		list-style: none;
		background-color: #fff;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		cursor: pointer;
		font-family: Arial;
		font-weight: 500;
		border: 1px solid #dcdee2;
		border-radius: 4px;
		transition: border 0.2s ease-in-out, color 0.2s ease-in-out;

		/deep/ .ivu-checkbox-wrapper {
			margin: 0 !important;
			padding-left: 10px;
		}
	}
}
</style>
